import React, { useState } from 'react';
import './Person.css'; // 需要创建对应的CSS文件
import My from './Content'
// 菜单项类型定义
type MenuItem = {
    key: string;
    title: string;
    icon?: React.ReactNode;
};

// 模拟菜单数据
const menuItems: MenuItem[] = [
    { key: 'info', title: '我的信息' },
    { key: 'tasks', title: '任务中心' },
    { key: 'enterprise', title: '企业主页' },
    { key: 'Vip', title: '我的会员' },
    { key: 'lp', title: '我的礼品' },
    { key: 'downloads', title: '我的下载' },
    { key: 'CollectionsPage', title: '我的收藏' },
    { key: 'jop', title: '我的足迹' },
    { key: 'Attentive', title: '我的关注' },
    { key: 'infocenter', title: '消息中心' },
];

// 内容组件类型
type ContentComponent = React.FC<{ data?: unknown }>;

// 各个页面内容组件
const InfoPage: ContentComponent = () => <div>  <My /></div>;
const TasksPage: ContentComponent = () => <div>
    我们的夏天
</div>;
const EnterprisePage: ContentComponent = () => <div>企业信息内容...</div>;
const Vip: ContentComponent = () => <div>了解一下</div>
const Present: ContentComponent = () => <div>领取一下</div>
const DownloadsPage: ContentComponent = () => <div>下载记录内容...</div>;
const CollectionsPage: ContentComponent = () => <div>收藏内容...</div>;
const Jop: ContentComponent = () => <div>浏览记录</div>;
const Attentive: ContentComponent = () => <div>关注</div>;
const InfoCenter: ContentComponent = () => <div>信息</div>;
const Person = () => {
    const [activeKey, setActiveKey] = useState('info');
    const [formData, setFormData] = useState({
        phone: '183****44217',
        // 其他表单字段...
    });

    // 菜单项点击处理
    const handleMenuClick = (key: string) => {
        setActiveKey(key);
    };

    // 根据activeKey渲染对应组件
    const renderContent = () => {
        switch (activeKey) {
            case 'info':
                return <InfoPage data={formData} />;
            case 'tasks':
                return <TasksPage />;
            case 'enterprise':
                return <EnterprisePage />;
            case 'downloads':
                return <DownloadsPage />;
            case 'collections':
                return <CollectionsPage />;
            case 'Vip':
                return <Vip />;
            case 'lp':
                return <Present />;
            case 'jop':
                return <Jop />;
            case 'Attentive':
                return <Attentive />;
            case 'infocenter':
                return <InfoCenter />;
            default:
                return <InfoPage />;
        }
    };

    return (
        <div className="layout-container">
            {/* 左侧菜单 */}
            <div className="sidebar">
                <div className="user-info">
                    <img src="/src/assets/acimg/user.png" alt="用户头像" />
                    <p>183****44217</p>
                </div>
                <ul className="menu-list">
                    {menuItems.map(item => (
                        <li
                            key={item.key}
                            className={activeKey === item.key ? 'active' : ''}
                            onClick={() => handleMenuClick(item.key)}
                        >
                            {item.title}
                        </li>
                    ))}
                </ul>
            </div>
            {/* 右侧内容 */}
            <div className="content">
                {renderContent()}
            </div>

        </div>
    );
};

export default Person;